<template>
  <div
    class="SK-user-center-basic-info-container SK-user-center-form-container"
  >
    <div class="top-info">
      <div class="left-photo">
        <div class="simple-uploader-container">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/api/upLoadPage"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="userInfo.page" :src="userInfo.page" class="avatar" />
            <i v-else class="el-icon-camera-solid"></i>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="SK-form-block" id="nick-name">
      <div class="SK-label-name">用户名：</div>
      <div class="SK-form-control">{{ userInfo.name }}</div>
    </div>
    <div class="SK-form-block">
      <div class="SK-label-name">手机：</div>
      <div class="SK-form-control" v-if="flag">
        <div style="display: inline-block">{{ userInfo.phone }}</div>
        <a
          class="SK-form-control"
          id="link-btn"
          @click="changeFlag(false)"
          :disabled="flag == false"
          >点击修改</a
        >
      </div>
      <div class="form-input" v-else>
        <div>
          <input
            class="SK-form-control error"
            type="text"
            name="phone"
            id="phone"
            @blur="changeFlag(true)"
            v-model="userInfo.phone"
            :class="{ invalid: errors.has('phone') }"
            v-validate="{ required: true, regex: /^1\d{10}$/ }"
          />
        </div>

        <span class="error-msg">{{ errors.first("phone") }}</span>
      </div>
    </div>
    <div class="SK-form-block">
      <div class="SK-label-name">密码：</div>
      <div class="SK-form-control" v-if="flag2">
        <div style="display: inline-block">******</div>
        <a
          class="SK-form-control"
          id="link-btn"
          @click="changeFlag2(false)"
          :disabled="flag2 == false"
          >点击修改</a
        >
      </div>
      <div class="form-input" v-else>
        <div>
          <input
            class="SK-form-control error"
            type="text"
            name="password"
            id="password"
            @blur="changeFlag2(true)"
            v-model="userInfo.password"
            :class="{ invalid: errors.has('password') }"
            v-validate="{ required: true, regex: /^[0-9A-Za-z]{8,20}$/ }"
          />
        </div>

        <span class="error-msg">{{ errors.first("password") }}</span>
        <span class="error-msg">(8-20位数字字母组成)</span>
      </div>
    </div>
    <div class="SK-form-block">
      <div class="SK-label-name">性别：</div>
      <div class="SK-form-control" v-if="flag3">
        <div style="display: inline-block">{{ userInfo.sex }}</div>
        <a
          class="SK-form-control"
          id="link-btn"
          @click="changeFlag3(false)"
          :disabled="flag3 == false"
          >点击修改</a
        >
      </div>
      <div class="form-input" v-else>
        <div>
          <input
            class="SK-form-control error"
            type="text"
            name="sex"
            id="sex"
            @blur="changeFlag3(true)"
            v-model="userInfo.sex"
            :class="{ invalid: errors.has('sex') }"
            v-validate="{ required: true }"
          />
        </div>
        <span class="error-msg">{{ errors.first("sex") }}</span>
        <span class="error-msg">男/女</span>
      </div>
    </div>
    <div class="btn-wrap">
      <button class="submit" @click="changeInfo">保存全部修改</button>
    </div>
  </div>
</template>

<script>
import pic from "../../../assets/images/default.jpeg";
export default {
  name: "Info",
  data() {
    return {
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },

      flag: true,
      flag2: true,
      flag3: true,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (this.userInfo.page == null) {
        this.userInfo.page = pic;
      }
    },
    async handleAvatarSuccess(res, file) {
      // 上传成功之后的回显
      this.userInfo.page = URL.createObjectURL(file.raw);
      // 上传成功到数据库
      try {
        await this.$store.dispatch("pageUpload", {
          name: this.userInfo.name,
          page: file.response.data.src,
          money: this.userInfo.money,
          phone: this.userInfo.phone,
          sex: this.userInfo.sex,
          state: this.userInfo.state,
          password: this.userInfo.password,
        });
        this.userInfo.page = file.response.data.src;
        alert("上传成功");
      } catch (error) {
        alert(error.message);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async changeFlag(flag) {
      if (flag == true) {
        const success = await this.$validator.validateAll();
        if (success) {
          this.flag = flag;
        }
      } else {
        this.flag = flag;
      }
    },
    async changeFlag2(flag) {
      if (flag == true) {
        const success = await this.$validator.validateAll();
        if (success) {
          this.flag2 = flag;
        }
      } else {
        this.flag2 = flag;
      }
    },
    async changeFlag3(flag) {
      if (flag == true) {
        const success = await this.$validator.validateAll();
        if (success) {
          this.flag3 = flag;
        }
      } else {
        this.flag3 = flag;
      }
    },
    async changeInfo() {
      try {
        await this.$store.dispatch("editInfo", this.userInfo);
        localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
        this.$message.success("修改成功");
      } catch (error) {
        alert(error.message);
      }
    },
  },
};
</script>

<style scoped>
@import "../../../assets/css/info.css";
</style>
